<template>
  <div style="width:calc(100vw - 250px);padding:10px 0;">
    <div style="display:flex;flex-wrap:wrap;padding:15px 0;justify-content:space-around">
      <!-- 搜索区域 -->
      <div class="citem">
        <div class="title">活动名称</div>
        <div><el-input v-model="searchForm.title" placeholder="请输入活动名称"></el-input></div>
      </div>
      <div class="citem">
        <div class="title">状态</div>
        <div>
          <el-select v-model="searchForm.status" placeholder="请选择" clearable >
            <el-option
              v-for="item in status"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="citem">
        <div class="title">等级</div>
        <div>
          <el-select v-model="searchForm.type" placeholder="请选择" clearable >
            <el-option
              v-for="item in type"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="citem">
        <div class="title">活动开始时间</div>
        <div>
          <el-date-picker
            v-model="searchForm.createTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
      <div class="citem">
        <div class="title">活动结束时间</div>
        <div>
          <el-date-picker
            v-model="searchForm.deadTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
      <div class="citem">
        <div class="title">参与院系</div>
        <div><el-input v-model="searchForm.department"  placeholder="请输入参与院系"></el-input></div>
      </div>
      <div style="width:100%;text-align:left">
        <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </div>
    </div>
    <el-table
      :data="activeList"
      height="400"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        fixed
        width="100">
      </el-table-column>
      <el-table-column
        prop="activeName"
        label="活动名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="acriveAddress"
        width="200"
        label="活动地址">
      </el-table-column>
      <el-table-column label="活动等级">
        <template slot-scope="scope">
          <el-tag 
            :type="scope.row.type===0?'success':(scope.row.type===1?
              'primary':'warning')"  
            effect="plain">
            {{ dispose(1,scope.row.type) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="参与人数">
        <template slot-scope="scope">
          <div>{{ scope.row.peopleCount===null?'全体':scope.row.peopleCount }}</div>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div>{{ dispose(2,scope.row.status) }}</div>
        </template>
      </el-table-column>

      <el-table-column label="报名时间" prop="createTime" width="180"></el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" @click="detail(scope.row.id)">详情</el-button>
          <el-button type="danger" @click="deleteActive(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-count="pageCount"
        :page-size="8"
        @current-change="handlerChange"
        :current-page="currentPage"
        :total="total">
    </el-pagination>

  </div>
</template>

<script>
import request from '@/util/request.js'
import common from '@/util/common'


export default {
    data(){
        return{
            activeList:[],
            pageCount:0,
            total:0,
            currentPage:0,
            isData:false,
            searchForm:{
              status:null,
              type:null,
              createTime:null,
              deadTime:null,
              title:'',
              department:''
            },
            status:[
              {id:0,label:'审核中'},
              {id:1,label:'报名中'},
              {id:2,label:'已截止'},
              {id:3,label:'已结束'},
            ],
            type:[
              {id:0,label:'院级'},
              {id:1,label:'校级'},
              {id:2,label:'社团'},
            ],
        }
    },
    methods:{
      // 获取活动列表
        getActiveList(){
          request.get(`/admin/active/list?currentPage=${this.currentPage}`).then((res) => {
                  console.log('获取成功：',res)
              this.pageCount = res.data.pages
              this.total = res.data.total
              this.activeList = res.data.records
              console.log('数组数据',this.activeList);
              this.isData = true
          })
          .catch(err =>{
            if (err.response) {
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
          })
        },
        handlerChange(page){
            console.log(page);
            this.currentPage = page
            this.getActiveList()
        },
        dispose(type,item){
          if(type===1){
            // 等级处理
            return common.typeActive(item)
          }else if(type===2){
            // 状态处理
            return common.statusActive(item)
          }
         
        },
        detail(item){
          this.$router.push(`/detail?id=${item}`)
        },
        deleteActive(id){
          this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.get(`/admin/active/delete?id=${id}`).then((res) => {
            console.log('获取成功：',res)
            this.$notify.success('操作成功')
            this.getActiveList()
          })
          .catch(err =>{
            if (err.response) {
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
          })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },
        search(){
          request.post('/admin/active/search',this.searchForm).then((res) => {
              this.activeList = res.data
          })
          .catch(err =>{
            if (err.response) {
              if (err.response) {
                  this.$notify.error(err.message)
              } else {
                  this.$notify.error('网络错误')
              }
            }  
          })
        },
        reset(){
          this.searchForm = {
              status:null,
              type:null,
              createTime:null,
              deadTime:null,
              title:'',
              department:''
          }
          this.getActiveList()
        }
    },
    mounted(){
        this.getActiveList(0)
    }
}
</script>

<style scoped>

.citem{
  display: flex;
  line-height: 32px;
  margin-bottom: 10px;
  margin-right: 20px;
}
.title{
  margin-right: 10px;
  font-size: 14px;
  color: #787878;
}
.des{
  display:flex;
  font-size:14px;
  color:#787878;
}
</style>